<template>
  <AppPage showFooter :style="{ backgroundImage: appStore.theme===`light`?`url(${bgImg})`:`url(${bgImg_dark})`}"
           style="background-repeat: no-repeat;background-size: cover">
    <div style="display: flex;flex: 1;align-items: center;justify-content: center">
      <n-card style="width: 400px;">
        <n-tabs
            class="card-tabs"
            default-value="signin"
            size="large"
            animated
            style="margin: 0 -4px"
            justify-content="space-evenly"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
          <n-tab-pane name="signin" tab="登录">
            <FormLogin></FormLogin>
          </n-tab-pane>
          <n-tab-pane name="signup" tab="注册">
            <FormRegister></FormRegister>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </AppPage>
</template>

<script setup lang="ts">
import AppPage from "@/components/page/AppPage.vue";
import bgImg from "@/assets/蓝色几何抽象背景.jpg"
import bgImg_dark from "@/assets/抽象流畅的黑色波浪艺术.jpg"
import {useAppStore} from "@/sotre";
import FormLogin from "@/views/login/components/FormLogin.vue";
import FormRegister from "@/views/login/components/FormRegister.vue";

const appStore = useAppStore()


</script>

<style scoped>

</style>
